<script setup lang="ts">
import VChart from 'vue-echarts'
import 'echarts'
import { computed } from 'vue'

interface Props {
  timeAxis: any[]
  darkGreenData: any[]
  yellowData: any[]
  witheredData: any[]
  whiteData: any[]
}

const props = defineProps<Props>()

// 模拟的时间轴数据，与你提供的保持一致
const timeAxis = props.timeAxis
// 模拟每种颜色叶片在对应时间的占比数据（可根据实际情况替换为真实数据）
const darkGreenData = props.darkGreenData
const yellowData = props.yellowData
const witheredData = props.witheredData
const whiteData = props.whiteData

const options = computed(() => {
  return {
    title: {
      left: 'center',
      text: '叶片颜色分析',
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data: ['深绿色叶片', '黄化叶片', '枯萎叶片', '白化叶片'],
      left: 'center',
      bottom: '0',
      orient: 'horizontal',
    },
    xAxis: {
      type: 'category',
      data: timeAxis,
      axisLabel: {
        fontSize: 12,
      },
    },
    yAxis: {
      type: 'value',
      name: '占比',
      axisLabel: {
        formatter: '{value}%', // 假设占比以百分比展示，可根据实际调整
      },
    },
    series: [
      {
        name: '深绿色叶片',
        type: 'line',
        data: darkGreenData,
        smooth: true,
      },
      {
        name: '黄化叶片',
        type: 'line',
        data: yellowData,
        smooth: true,
      },
      {
        name: '枯萎叶片',
        type: 'line',
        data: witheredData,
        smooth: true,
      },
      {
        name: '白化叶片',
        type: 'line',
        data: whiteData,
        smooth: true,
      },
    ],
  }
})
</script>

<template>
  <div class="data-leaves-color-analyze">
    <a-card title="叶片颜色分析">
      <v-chart :option="options" style="height: 400px; max-width: 100%" />
    </a-card>
  </div>
</template>

<style scoped></style>
